<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=                    , initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--  -->
  <input type="button" value="随机" id="a1">
  <div id="d1" style="background-color: red;width:200px;height:200px;margin: 0 auto;opacity: 1;text-align: center;">111</div>
  <script>
    var inp = document.getElementById("a1");
    var di = document.getElementById("d1");
    inp.value = "点击隐藏"
    inp.onclick = function () {
      if (this.value === "点击隐藏") {
        di.style.opacity =" 0";
        this.value = "点击显示"
      }else{
        di.style.opacity ="1";
        this.value = "点击隐藏"
      }
    }

    // 在事件函数内部 this指向的是事件源
      //区分不同函数内部this的指向
      // 普通函数 指向的是window
      // 构造函数  生成的示例对象（new.arry等）
      // 对象的方法 指向的是对象的本身
      // 事件函数  指向的是事件源
  </script>
</body>
</html>